<template>
  <div>
    <!-- 学生人数 管理员人数的柱状图 -->
    <div class="chart_wrap">
      <bar-com :datalist="bardata"></bar-com>
      <pie-com :piedata="pieData"></pie-com>
    </div>
    <line-com :date="date" :qian="qian" :hou="hou" :s="s"></line-com>
  </div>
</template>
<script>
import barCom from '../../components/bar.vue'
import pieCom from '../../components/pie.vue'
import lineCom from '../../components/line.vue'
import { _getStudent } from '../../api/student'
import { _getAdminList } from '../../api/admin'
import { _getCourseList } from '../../api/courselist'
export default {
  data () {
    return {
      bardata: [],
      pieData: [],
      allData: [],
      date: [],
      qian: [],
      hou: [],
      s: []
    }
  },
  components: {
    barCom,
    pieCom,
    lineCom
  },
  created () {
    Promise.all([
      _getAdminList({ pageStart: 1 }),
      _getStudent({ pageStart: 1 })
    ]).then(res => {
      console.log(res)
      this.bardata = [res[0].data.count, res[1].data.count]
      console.log(this.bardata)
      this.pieData = [
        { name: '管理员人数', value: res[0].data.count },
        {
          name: '学员人数',
          value: res[1].data.count
        }
      ]
    })
    // 获取所有课程 筛选出最近10天的课程
    //根据前端后端视觉设计分类
    //
    for (var i = 1; i < 15; i++) {
      _getCourseList({ pageStart: i }).then(res => {
        console.log(res)
        this.allData = [...this.allData, ...res.data.list]
        console.log(this.allData)
        // 根据日期和分类 处理数据
        var dates = this.allData.map(item => {
          return item.createAt.substr(0, 10)
        })
        this.date = Array.from(new Set(dates)) //[('2022-7-6', '2022-7-7')]
        console.log(this.date)
        var qian = []
        var hou = []
        var s = []
        // 循环日期
        this.date.forEach(item => {
          qian.push(
            this.allData.filter(it => {
              return it.CategoryOne == '1' && item == it.createAt.substr(0, 10)
            }).length
          )
          hou.push(
            this.allData.filter(it => {
              return it.CategoryOne == '2' && item == it.createAt.substr(0, 10)
            }).length
          )
          s.push(
            this.allData.filter(it => {
              return it.CategoryOne == '3' && item == it.createAt.substr(0, 10)
            }).length
          )
        })
        console.log(qian)
        this.qian = qian
        console.log(hou)
        this.hou = hou
        console.log(s)
        this.s = s
      })
    }
  }
}
</script>
<style lang="less">
.chart_wrap {
  display: flex;
}
</style>
